<template>
  <view class="address_box">
    <view class="address" @click="toAddADress">
      <image class="dingwei" src="https://mh.qingfentool.vip/upload/image/20230410/a2509b85589a571ad191f55fabb4d860.png">
      </image>
      <view class="text" v-if="cityList == '' || cityList == null"> 选择收货地址 </view>
      <view class="textbox" v-else>
        <view class="title">
          {{ cityList.province }}{{ cityList.city }}{{ cityList.district }}{{ cityList.detail }}
        </view>
        <view class="info_box">
          <text class="name">{{ cityList.name }}</text>
          <text class="telphone">{{ cityList.mobile }}</text>
        </view>
      </view>

      <image :src="iconurl + '/static/newImg/fanhui.png'" mode="aspectFill" class="u-icon" @click="toAddADress">
      </image>
    </view>



    <!-- 商品列表 -->
    <goodList ref="goodData"></goodList>
    <!-- 运费 -->
    <view class="yunfeihezi">
      <view class="top_box">
        <text class="yunfeiweizi">运费：</text>
        <text class="yunfeitxt">￥：{{ moneyNum }}</text>
      </view>
      <view class="yunfeishuoming">
        <view class="left_box">运费说明：</view>
        <view class="right_box"> {{ freightInfo }}</view>

      </view>
      <view class="bot_box">
        <text class="youhui">优惠券：</text>
        <text class="youhuiquan" @tap="youhuiQuan">无优惠券></text>
      </view>
    </view>
    <view class="title_center"> 支付方式 </view>

    <view class="pay_wrap">
      <!-- #ifdef APP-PLUS -->
      <view class="zhifubao" @click="handlePay(2)" v-if="walletData.alipay_status == 'on'">
        <image :src="iconurl + '/static/newImg/zhifubao.png'" mode="aspectFill" class="icon"></image>
        <view class="text"> 支付宝 </view>
        <image src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png"
          mode="aspectFill" class="right" v-if="pay_type == 2">
        </image>
        <view class="right" v-else></view>
      </view>
      <!-- #endif -->

      <view class="zhifubao" @click="handlePay(1)" v-if="walletData.weixin_pay_status == 'on'">
        <image :src="iconurl + '/static/newImg/weixin.png'" mode="aspectFill" class="icon"></image>
        <view class="text"> 微信 </view>
        <image src="https://mh.qingfentool.vip/upload/image/20230517/4ff94c82cf5699b4da8ab39de664ae27.png"
          mode="aspectFill" class="right" v-if="pay_type == 1">
        </image>
        <view class="right" v-else></view>
      </view>
    </view>               
    <view class="but_pay">
      <view class="text">
        合计：
        <text v-if="!cityList"></text>
        <text v-else-if="cityList && moneyNum <= 0">免运费</text>
        <text style="font-size: 40rpx" v-else>{{ moneyNum }}元</text>
      </view>
      <view class="topay" @click="uploadorder"> 支付并发货 </view>
    </view>
  </view>
</template>

<script>
import goodList from '../components/goodList.vue'
import wxPopupHegui from '@/components/wx_pay/wx_pay_popup.vue'
export default {
  components: {
    goodList,
    wxPopupHegui
  },
  data() {
    return {
      pay_type: 1, //支付方式1微信2支付宝
      isAddress: false,
      cityShow: false,
      cityList: {
        province: '',
        city: '',
        district: '',
        detail: '',
        name: '',
        mobile: '',
      },
      id_list: [],
      order_id: '',
      moneyNum: null,
      freightInfo: null,
      create_order_id: 0,
      payurl: '',
      iconurl: this.$configs.urls,
      code: '',
      codeUrl: '',
      walletData: {}, //余额
    }
  },
  onLoad(option) {
    this.order_id = option.order_id
    this.id_list = JSON.parse(option.list)
    this.$nextTick(() => {
      this.getList()
    })
  },
  onShow() {
    // #ifdef MP-WEIXIN
    this.getcode()
    // #endif
    this.getwallet() //钱包
    uni.$on('changedz', res => {
      this.cityList = res.local
      this.cityList.address_id = res.local.id
    })
    this.$nextTick(() => {
      this.arrData()
    })
  },

  methods: {
    youhuiQuan() {
      uni.navigateTo({
        url: '/userPage/user/freightCoupon'
      })
    },
    getwallet() {
      this.$Request.get(this.$api.user.wallet).then(res => {
        this.walletData = res.data
      })
    },
    //支付状态
    handlePay(type) {
      this.pay_type = type
    },
    getcode() {
      let that = this
      uni.login({
        provider: 'weixin',
        success: function (res) {
          that.code = res.code
        }
      })
    },
    //获取运费
    arrData() {
      let data = {
        order_id: this.order_id,
        address_id: this.cityList.address_id
      }
      this.$Request.post(this.$api.order.sendPreview, data).then(res => {
        this.cityList = res.data.address
        this.moneyNum = res.data.freight
        this.freightInfo = res.data.freight_info
      })
    },
    Payment(pay_data) {
      let provider = ''
      ////console.log(pay_data);
      if (this.pay_type == 1) {
        provider = 'wxpay'
      } else {
        provider = 'alipay'
      }
      //调用支付
      // #ifdef MP-WEIXIN
      this.wxProPay(pay_data)
      // #endif

      // #ifdef APP-PLUS
      uni.requestPayment({
        provider: provider,
        orderInfo: pay_data,
        success() {
          uni.showToast({
            title: '支付成功',
            icon: 'none'
          })
          uni.redirectTo({
            url: '/userPage/user/fahuoOrder/fahuoOrder?type=' + 0
          })
        },
        fail(res) {
          ////console.log(res)
          uni.showToast({
            title: '支付失败',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/userPage/user/fahuoOrder/fahuoOrder?type=' + 0
            })
          }, 2000)
          clearTimeout();
        }
      })
      // #endif
    },
    wxProPay(pay_data) {
      let data = {
        timeStamp: pay_data.timeStamp && pay_data.timeStamp.toString(),
        nonceStr: pay_data.nonceStr,
        signType: 'MD5',
        package: pay_data.package,
        paySign: pay_data.paySign
      }
      uni.requestPayment({
        provider: 'wxpay',
        ...data,
        success() {
          uni.showToast({
            title: '支付成功',
            icon: 'none'
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/userPage/user/fahuoOrder/fahuoOrder?type=' + 0
            })
          }, 800)
          clearTimeout();
        },
        fail(res) {
          uni.showToast({
            title: '支付失败',
            icon: 'none'
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/userPage/user/fahuoOrder/fahuoOrder?type=' + 0
            })
          }, 800)
          clearTimeout();
        }
      })
    },
    getPayData(order_id) {
      // #ifdef APP-PLUS
      var data = {
        order_id: order_id,
        pay_type: this.pay_type
      }
      // #endif
      // #ifdef MP-WEIXIN
      var data = {
        js_code: this.code,
        order_id: order_id,
        pay_type: this.pay_type,
        is_xwechat: 1,
        wechat_type: uni.getStorageSync('wechat_type'),
      }
      // #endif
      this.$Request.get(this.$api.order.sendPayData, data).then(res => {
        if (res.data.status == 0) {
          //调用微信或者支付宝
          this.payurl = res.data.pay_data
          this.order_id = res.data.order_id
          this.Payment(res.data.pay_data)
        } else if (res.data.status == 1) {
          //已支付
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/userPage/user/fahuoOrder/fahuoOrder?type=' + 0
            })
          }, 800)
          clearTimeout();
        }
      })
    },
    getjieguo() {
      let data = {
        order_id: this.order_id
      }
      this.$Request.get(this.$api.index.payResult, data).then(res => {
        if (res.data.is_pay == 1) {
          clearInterval(this.getjieguodingshi)
          this.urlpayStatus = false
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 800)
          clearTimeout();
        }
      })
    },
    //提交订单
    uploadorder() {
      if (this.cityList == null) {
        uni.showToast({
          title: '请选择收获地址',
          icon: 'none'
        })
        return
      }
      let data = {
        order_id: this.order_id,
        address_id: this.cityList.address_id,
        pay_type: this.pay_type
      }
      if (this.create_order_id > 0) {
        this.getPayData(this.create_order_id)
        return
      }
      uni.showLoading({
        title: '正在加载中....'
      })
      this.$Request.post(this.$api.order.sendOrderSubmit, data).then(res => {
        uni.setStorageSync('cabShuaxin', 1)
        uni.hideLoading()
        this.create_order_id = res.data.order_id
        if (res.data.status == 1) {
          //已支付
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 1000
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/userPage/user/fahuoOrder/fahuoOrder?type=' + 0
            })
          }, 1200)
          clearTimeout();
          return
        }
        this.getPayData(this.create_order_id)
      })
    },

    //获取列表
    getList() {
      this.$Request.get(this.$api.order.orderList).then(res => {
        let arr = res.data.list.filter((item, index) => {
          return this.id_list.indexOf(item.order_id) != -1
        })
        let arr1 = []
        arr.forEach(it => {
          if (it.is_expire == 0) {
            arr1.push(it)
          }
        })
        this.$refs.goodData.orderlist = arr

      })
    },
    //添加地址
    toAddADress() {
      uni.navigateTo({
        url: '/userPage/user/address/address'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.address_box {
  background-color: #262626;
  width: 100%;
  height: 100vh;
  padding: 40rpx 20rpx 0;

  .address {
    width: 710rpx;
    height: 143rpx;
    background: #262626;

    border: 1rpx solid #FED187;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .dingwei {
      width: 41rpx;
      height: 49rpx;
      border-radius: 50%;
      margin-left: 15rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .text {
      font-size: 28rpx;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #fff;
    }

    .textbox {
      flex: 1;
      font-size: 30rpx;
      font-weight: bold;
      color: #fff;

      .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #fff;
        margin: 0;
        width: 580rpx;
        /*限制元素宽度*/
        overflow: hidden;
        /*文本超出隐藏*/
        text-overflow: ellipsis;
        /*文本超出显示省略号*/
        white-space: nowrap;
        /*超出的空白区域不换行*/
      }

      .info_box {
        margin-top: 20rpx;
        font-size: 28rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #fff;

        .name {
          margin-right: 20rpx;
        }
      }
    }

    .u-icon {
      width: 14rpx;
      height: 26rpx;
      justify-content: flex-end;
      margin-left: auto;
      margin-right: 30rpx;
      flex-shrink: 0;
    }
  }

  .title_center {
    font-size: 34rpx;
    font-weight: 500;
    color: #fff;
    line-height: 48rpx;
    margin: 30rpx 0;
  }

  .pay_wrap {
    width: 710rpx;
    border-radius: 20rpx;
    background-color: #262626;
    padding: 2rpx 0;

    // background-color: red;
    .zhifubao {
      display: flex;
      align-items: center;
      margin: 30rpx 0;

      .icon {
        width: 50rpx;
        height: 50rpx;
        margin-left: 14rpx;
        margin-right: 10rpx;
      }

      .text {
        font-size: 30rpx;
        font-weight: 500;
        color: #fff;
        line-height: 50rpx;
      }

      .right {
        width: 42rpx;
        height: 42rpx;
        border: 2rpx solid #c7c7c7;
        border-radius: 50%;
        justify-content: flex-end;
        margin-left: auto;
        margin-right: 20rpx;
      }
    }
  }

  // 运费
  .yunfeihezi {
    width: 710rpx;
    height: 310rpx;
    background: #262626;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    border: 1rpx solid #FED187;
    opacity: 1;

    .top_box {
      width: 98%;
      height: 94rpx;

      line-height: 94rpx;
      padding: 0 20rpx 0 20rpx;

      .yunfeiweizi {
        font-size: 28rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #fff;
      }

      .yunfeitxt {
        float: right;
        font-size: 28rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #FED187;
      }
    }

    .yunfeishuoming {
      width: 98%;
      height: 142rpx;
      display: flex;
      justify-content: space-between;

      .left_box {
        width: 25%;
        font-size: 28rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #fff;
        padding-left: 20rpx;
      }

      .right_box {
        padding-right: 20rpx;
        width: 75%;
        font-size: 24rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #fff;
      }

    }

    .bot_box {
      width: 100%;
      height: 50rpx;
      line-height: 50rpx;

      .youhui {
        width: 114rpx;
        height: 100%;
        font-size: 28rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #fff;
        padding-left: 20rpx;
        // line-height: 40rpx;
      }

      .youhuiquan {
        float: right;
        width: 200rpx;
        font-size: 24rpx;
        height: 100%;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #fff;
        text-align: right;
        padding-right: 20rpx;
      }
    }
  }

  .but_pay {
    display: flex;
    align-items: center;
    width: 750rpx;
    background: #262626;
    margin-left: -20rpx;
    padding: 38rpx 0;
    position: fixed;
    bottom: 0;
    border-top: 1rpx solid #FED187;

    .text {
      font-size: 26rpx;
      font-weight: bold;
      margin-left: 20rpx;
      color: #fff;

      text {
        color: #FED187;
        font-weight: 550;
      }
    }

    .topay {

      justify-content: flex-end;
      margin-left: auto;
      width: 234rpx;
      height: 77rpx;
      background: #FFB200;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #fff;
      font-size: 30rpx;
      margin-right: 20rpx;
      line-height: 77rpx;
      text-align: center;
    }
  }
}
</style>
